<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${article.title}</title>
  <meta name="keywords" content="${article.seoKeywords}">
  <meta name="description" content="${article.seoDescription}">
  [#include 'includes_meta.html'/]
  [#include 'includes_css.html'/]
  [#include 'includes_js.html'/]
</head>
<body>
[#include 'includes_header.html'/]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.paths as c]
          <li class="list-inline-item">/</li>
          <li class="list-inline-item">[@A bean=c/]</li>
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h3 class="cm-ff-yh">${article.title}</h3>
      <div class="mt-3 pb-2 border-bottom text-muted">
        <span>${format(article.publishDate, 'yyyy-MM-dd HH:mm')}</span>
        [#if article.source??]<span class="ml-2">${article.source}</span>[/#if]
        [#if article.author??]<span class="ml-2">${article.author}</span>[/#if]
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          axios.get('${api}/article/view/${article.id}').then(function (response) {
            $('#views').text(response.data);
          });
        </script>
      </div>
      [#if article.doc??]
        <div id="full-container" class="mt-3 mb-3 p-1 text-center bg-dark">
          <div id="toolbar" class="sticky-top mb-2">
            <button class="btn btn-secondary" onclick="zoomIn()">-</button>
            <button class="btn btn-secondary ml-2" onclick="zoomOut()">+</button>
            <button id="fullscreenButton" class="btn btn-secondary ml-2" onclick="fullscreen()">全屏</button>
            <button id="exitFullscreenButton" class="btn btn-secondary ml-2 hidden" onclick="exitFullscreen()">退出</button>
          </div>
          <div id="container" class="overflow-auto"></div>
        </div>
        <script src="${files}/vendor/pdfjs-dist/build/pdf.js"></script>
        <script>
          var url = '${article.doc}';
          // Loaded via <script> tag, create shortcut to access PDF.js exports.
          var pdfjsLib = window['pdfjs-dist/build/pdf'];
          // The workerSrc property shall be specified.
          pdfjsLib.GlobalWorkerOptions.workerSrc = '${files}/vendor/pdfjs-dist/build/pdf.worker.js';

          var pdfDoc;
          var canvas = [], context = [];
          var fullContainer = document.getElementById('full-container');
          var container = document.getElementById('container');
          var containerWidth = $(container).width();
          var scale;
          var numPages;
          var pageRendering = 0;
          var scalePending = null;

          function renderPDF(pageNumber) {
            pdfDoc.getPage(pageNumber).then(function (page) {
              console.log('Page loaded');
              var viewport;
              if (!scale) {
                viewport = page.getViewport({scale: 1});
                scale = containerWidth / viewport.width;
              }
              viewport = page.getViewport({scale: scale});
              canvas[pageNumber - 1].height = viewport.height;
              canvas[pageNumber - 1].width = viewport.width;

              // Render PDF page into canvas context
              var renderContext = {
                canvasContext: context[pageNumber - 1],
                viewport: viewport
              };
              var renderTask = page.render(renderContext);
              renderTask.promise.then(function () {
                console.log('Page rendered');
                pageRendering--;
                if (scalePending && pageRendering === 0) {
                  scale = scalePending;
                  scalePending = null;
                  renderPDFs();
                }
              });
            });
          }

          function renderPDFs() {
            pageRendering = numPages;
            for (var i = 1; i <= numPages; i++) {
              renderPDF(i);
            }
          }

          function zoomIn() {
            if (scale <= 0.3 || (scalePending && scalePending <= 0.3)) return;
            if (pageRendering > 0) {
              if (scalePending) {
                scalePending = scalePending - 0.2
              } else {
                scalePending = scale - 0.2;
              }
            } else{
              scale -= 0.2;
              renderPDFs();
            }
          }

          function zoomOut() {
            if (pageRendering > 0) {
              if (scalePending) {
                scalePending = scalePending + 0.2
              } else {
                scalePending = scale + 0.2;
              }
            } else{
              scale += 0.2;
              renderPDFs();
            }
          }

          // 进入全屏
          function fullscreen() {
            if (fullContainer.requestFullscreen) {
              fullContainer.requestFullscreen();
            } else if (fullContainer.mozRequestFullScreen) {
              fullContainer.mozRequestFullScreen();
            } else if (fullContainer.webkitRequestFullscreen) {
              fullContainer.webkitRequestFullscreen();
            } else if (fullContainer.msRequestFullscreen) {
              fullContainer.msRequestFullscreen();
            }
          }
          // 退出全屏
          function exitFullscreen() {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          }

          function isFullscreen() {
            return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
          }

          function _fullscreenChange() {
            if (isFullscreen()) {
              $('#fullscreenButton').hide();
              $('#exitFullscreenButton').show();
              $(fullContainer).addClass('overflow-auto');
            } else {
              $('#fullscreenButton').show();
              $('#exitFullscreenButton').hide();
              $(fullContainer).removeClass('overflow-auto');
            }
          }

          function _addFullscreenChangeListeners() {
            window.addEventListener("fullscreenchange", _fullscreenChange);
            window.addEventListener("mozfullscreenchange", _fullscreenChange);
            window.addEventListener("webkitfullscreenchange", _fullscreenChange);
            window.addEventListener("MSFullscreenChange", _fullscreenChange);
          }

          _addFullscreenChangeListeners();

          // Asynchronous download of PDF
          pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            console.log('PDF loaded');
            numPages = pdfDoc.numPages;
            for (var i = 1; i <= numPages; i++) {
              var pageDiv = document.createElement('div');
              pageDiv.setAttribute('id', 'pdf-page-' + i);
              container.appendChild(pageDiv);
              canvas[i - 1] = document.createElement('canvas');
              pageDiv.appendChild(canvas[i - 1]);
              context[i - 1] = canvas[i - 1].getContext('2d');
            }
            renderPDFs();
          }, function (reason) {
            // PDF loading error
            console.error(reason);
          });
        </script>
      [/#if]
      <div class="mt-4" id="articleText">[#noescape]${article.text!}[/#noescape]</div>
      <div class="lead d-flex justify-content-center text-info">
        <div class="cm-pointer" onclick="voteUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cm-pointer ml-4" onclick="voteDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function voteUp() {
          axios.post('${api}/article/up/${article.id}').then(function (response) {
            if (response.data <= 0) {
              alert("你已经顶过一次！");
              return;
            }
            $('#ups').text(response.data);
          });
        }

        function voteDown() {
          axios.post('${api}/article/down/${article.id}').then(function (response) {
            if (response.data <= 0) {
              alert("你已经踩过一次！");
              return;
            }
            $('#downs').text(response.data);
          });
        }

        axios.get('${api}/article/buffer/${article.id}').then(function (response) {
          $('#ups').text(response.data.ups);
          $('#downs').text(response.data.downs);
        });
        $('#articleText img').addClass('img-fluid');
      </script>

      <ul class="mt-4 list-unstyled">
        [@ArticleNext id=article.id publishDate=article.publishDate channelId=article.channelId; bean]
          <li class="text-truncate mt-2">
            <strong>上一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticleNext]
        [@ArticlePrev id=article.id publishDate=article.publishDate channelId=article.channelId; bean]
          <li class="text-truncate mt-2">
            <strong>下一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticlePrev]
      </ul>

      <h5 class="mt-4 border-bottom"><span class="cm-block-head-bottom">相关新闻</span></h5>
      [@EsArticleList q=article.title excludeId=article.id limit=5; list]
        <ul class="list-unstyled mt-3">
          [#list list as bean]
            <li class="text-truncate mt-2">[@A bean=bean class="cm-link"/]</li>
          [/#list]
        </ul>
      [/@EsArticleList]
    </div>
  </div>
</div>
[#include 'includes_footer.html'/]
</body>
</html>
[/#escape]
